<template>
	<view class="long">
		<view class="container">
		   <SlotMachine
		  		 ref="SlotMachine"
		  		 width="750rpx"
		  		 height="300rpx"
		  		 :blocks="blocks"
		  		 :prizes="prizes"
		  		:slots="slots"
		  		:defaultConfig="{
		 					 rowSpacing: '50rpx',
		 		}"
		  					 @end='endCallBack'
		  		/>	
		</view>
		    <text class="number">{{ number }}</text>
			<button @click="cleannum">clean</button>
			<button @click="start">start</button>
	</view>
  
  
</template>
<!-- ■抽奖组件(页面) -->
<script>
  import SlotMachine from '@lucky-canvas/uni/slot-machine'

export default {
  components: {
    SlotMachine
  },
  onLoad() {
    const lastNumber = uni.getStorageSync('lastNumber');
    this.number = lastNumber || 0;
    this.timer = setInterval(() => {
		if(this.number>6000) return clearInterval(this.timer)
      this.number += 1;
      uni.setStorageSync('lastNumber', this.number);
    }, 10);
  },
 data() {
 			return {
				number: 4000,
 				blocks: [],
 				slots: [//order里为奖品下标   --依次展示的顺序，speed为转速
 					{ speed: Math.floor(Math.random() * 11) + 10 ,order:[1,2,3,4,5,6,7]},//第一列奖品展示数据
 					{ speed: Math.floor(Math.random() * 11) + 10 ,order:[1,2,3,4,5,6,7]},//第二列奖品展示数据
 					{ speed: Math.floor(Math.random() * 11) + 10 ,order:[1,2,3,4,5,6,7]},//第三列奖品展示数据
					{ speed: Math.floor(Math.random() * 11) + 10 ,order:[1,2,3,4,5,6,7]},//第四列奖品展示数据
					{ speed: Math.floor(Math.random() * 11) + 10 ,order:[1,2,3,4,5,6,7]},//第五列奖品展示数据
					{ speed: Math.floor(Math.random() * 11) + 10 ,order:[1,2,3,4,5,6,7]},//第六列奖品展示数据
					{ speed: Math.floor(Math.random() * 11) + 10 ,order:[1,2,3,4,5,6,7]},//第七列奖品展示数据
 				],
 				prizes: [
					{nam: '1',imgs: [{src: require('../../static/logo.png'), style: 'width: 100px; height: 100px;'}]},//0
					{nam: '2',imgs: [{src: require('../../static/logo.png'), style: 'width: 100px; height: 100px;'}]},//1
					{nam: '3',imgs: [{src: require('../../static/logo.png'), style: 'width: 100px; height: 100px;'}]},//2
					{nam: '4',imgs: [{src: require('../../static/logo.png'), style: 'width: 100px; height: 100px;'}]},//3
					{nam: '5',imgs: [{src: require('../../static/logo.png'), style: 'width: 100px; height: 100px;'}]},//4
					{nam: '6',imgs: [{src: require('../../static/logo.png'), style: 'width: 100px; height: 100px;'}]},//0
					{nam: '7',imgs: [{src: require('../../static/logo.png'), style: 'width: 100px; height: 100px;'}]},//1
 				// 	{nam: '1',imgs: [{src: require('../../static/people/people (1).png'), style: 'width: 100px; height: 100px;'}]},//0
 				//     {nam: '2',imgs: [{src: require('../../static/people/people (2).png'), style: 'width: 100px; height: 100px;'}]},//1
 				//     {nam: '3',imgs: [{src: require('../../static/people/people (3).png'), style: 'width: 100px; height: 100px;'}]},//2
 				//     {nam: '4',imgs: [{src: require('../../static/people/people (4).png'), style: 'width: 100px; height: 100px;'}]},//3
 				//     {nam: '5',imgs: [{src: require('../../static/people/people (5).png'), style: 'width: 100px; height: 100px;'}]},//4
					// {nam: '6',imgs: [{src: require('../../static/people/people (6).png'), style: 'width: 100px; height: 100px;'}]},//0
					// {nam: '7',imgs: [{src: require('../../static/people/people (7).png'), style: 'width: 100px; height: 100px;'}]},//1
 				],    
 			}
 		},
  methods: {
	  cleannum(){
		   uni.setStorageSync('lastNumber', 0);
		   this.number = 0
	  },
    start() {
	var that = this
     that.$refs.SlotMachine.play() //组件开始旋转
     	let priceIndex = 0//中奖对应的奖品下标
     	setTimeout(() => {
     	// 假设后端返回的中奖索引是0
     	 // 调用stop停止旋转并传递中奖索引
     	 that.$refs.SlotMachine.stop(priceIndex-0);//stop-停止的位置
     	}, 3000)	
    },
    // 抽奖结束触发回调
    	endCallBack (prize) {
    			  // 奖品详情
    		prize为中奖的奖品信息
    	} 
  }
}
</script>

<style>
	.number {
	  font-size: 40px;
	  color: red;
	  animation: numberAnimation 1s;
	}
	
	@keyframes numberAnimation {
	  from {
	    opacity: 0;
	  }
	  to {
	    opacity: 1;
	  }
	}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 86vh;
}
.long{
	width:100vw;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-size: 100%;
}
</style>